<template>
	<a-modal
		:title="title"
		:width="modalWidth"
		:bodyStyle="bodyStyle"
		:visible="visible"
		:confirmLoading="confirmLoading"
		@ok="handleOk"
		@cancel="handleCancel"
		:destroyOnClose="true"
		:maskClosable="false"
	>
		<a-spin :spinning="confirmLoading">
			<a-form :form="form" autocomplete="off">
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="loginId">
					<a-input
						placeholder="loginId"
						:disabled="!isAdd"
						v-decorator="[
							'loginid',
							{
								rules: [{ required: true, whitespace: true, message: 'loginId' }],
								getValueFromEvent: removeSpaces
							}
						]"
					/>
				</a-form-item>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="disylayName">
					<a-input
						placeholder="disylayName"
						v-decorator="[
							'displayname',
							{
								rules: [{ required: true, whitespace: true, message: 'disylayName' }],
								getValueFromEvent: removeSpaces,
								trigger: 'blur'
							}
						]"
					/>
				</a-form-item>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="email">
					<a-input
						class="w100"
						placeholder="email"
						v-decorator="[
							'email',
							{
								rules: [{ required: true, message: 'email' }, { type: 'email', message: 'email' }],
								trigger: 'blur'
							}
						]"
					/>
				</a-form-item>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="password">
					<a-input-password
						class="w100"
						placeholder="password"
						:visibilityToggle="false"
						v-decorator="[
							'password',
							{
								rules: [{ required: isAdd, message: 'password' }, { validator: validateToNextPassword }]
							}
						]"
					/>
				</a-form-item>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="confirmPassword">
					<a-input-password
						class="w100"
						placeholder="confirmPassword"
						:visibilityToggle="false"
						@blur="handleConfirmBlur"
						v-decorator="[
							'confirmPassWord',
							{
								rules: [{ required: isAdd, message: 'confirmPassword' }, { validator: compareToFirstPassword }]
							}
						]"
					/>
				</a-form-item>
			</a-form>
		</a-spin>
	</a-modal>
</template>

<script>
import { api } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
export default {
	name: 'addRetrialModal',
	mixins: [ModalMixins],
	data() {
		return {
			confirmDirty: false
		};
	},
	created() {},
	methods: {
		add(record) {
			this.visible = true;
			if (record) {
				this.title = '编辑用户';
				this.isAdd = false;
				this.mdl = { ...record };
				this.init();
			} else {
				this.title = '新增用户';
				this.isAdd = true;
			}
		},
		init() {
			this.$nextTick(() => {
				this.form.setFieldsValue(this.$pick(this.mdl, 'loginid', 'displayname', 'email'));
			});
		},
		close() {
			this.$emit('close');
			this.visible = false;
		},
		handleOk() {
			const _this = this;
			// 触发表单验证
			this.form.validateFields((err, values) => {
				// 验证表单没错误
				if (!err) {
					let parameter = { ...values };
					/* 判断一下密码 */
					if (parameter.password != parameter.confirmPassWord) {
						_this.$message.error('两次输入的密码不匹配');
						return false;
					}
					_this.confirmLoading = true;
					this.$postAction(api.addAccount, Object.assign({}, parameter, !this.isAdd ? { uuid: this.mdl.uuid } : null))
						.then(res => {
							if (res.result) {
								_this.$message.success('保存成功');
								_this.$emit('ok');
								_this.form.resetFields();
								_this.visible = false;
							}
						})
						.finally(() => {
							_this.confirmLoading = false;
						});
				}
			});
		},
		handleCancel() {
			this.close();
		},
		compareToFirstPassword(rule, value, callback) {
			const form = this.form;
			if (value && value !== form.getFieldValue('password')) {
				callback('两次输入的密码不匹配');
			} else {
				callback();
			}
		},
		validateToNextPassword(rule, value, callback) {
			const form = this.form;
			if (value && this.confirmDirty) {
				form.validateFields(['confirmPassWord'], {
					force: true
				});
			}
			callback();
		},
		handleConfirmBlur(e) {
			const value = e.target.value;
			this.confirmDirty = this.confirmDirty || !!value;
		}
	}
};
</script>

<style scoped></style>
